<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org"/>
    <title>JavaScript: Basics</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="Copyright &#169; 2005-2010 W3C (MIT, ERCIM, Keio)"/>
    <meta name="duration" content="5"/>
    <meta name="font-size-adjustment" content="-2"/>

    <link rel="stylesheet" href="styles/slidy.css" type="text/css"/>
    <link rel="stylesheet" href="styles/w3c-blue.css" type="text/css"/>
    <script type="text/javascript" src="scripts/slidy.js" charset="utf-8">//</script>

    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/presentation.css"/>
    <script type="text/javascript" src="scripts/presentation.js"></script>
</head>


<body style="">
<div class="background">
    <img alt="" id="head-icon" src="graphics/icon-blue.png"/>
</div>

<div class="background slanty">
</div>

<div class="slide cover title">
    <img class="hidden" src="graphics/bullet.png" alt=""/>
    <img class="hidden" src="graphics/fold.gif" alt=""/>
    <img class="hidden" src="graphics/unfold.gif" alt=""/>
    <img class="hidden" src="graphics/fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/unfold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt=""/>

    <h1>JavaScript: Basics</h1>

    <div style="position: absolute; bottom: 20px;">
        <p>Alex.Kolonitsky@gmail.com</p>
        <p><a href="http://javascript-learning-courses.googlecode.com">http://javascript-learning-courses.googlecode.com</a></p>
    </div>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul>
        <li>Лексика</li>
        <li>Типы</li>
        <li>Управляющие конструкции</li>
        <li>Объекты</li>
        <li>Функции</li>
    </ul>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="current">Лексика</li>
        <li>Типы</li>
        <li>Управляющие конструкции</li>
        <li>Объекты</li>
        <li>Функции</li>
    </ul>
</div>

<div class="slide">
    <h1>Лексика</h1>

    <ul>
        <li>Чувствительность к регистру</li>
        <li>Символы разделители и переводы строк</li>
        <li>Необязательные точки с запятой</li>
        <li>Комментарии</li>
    </ul>
</div>

<div class="slide">
    <h1>Литералы</h1>

    <pre class="brush: js">
        12 // Число двенадцать
        1.2 // Число одна целая две десятых
        "hello world" // Строка текста
        'Hi' // Другая строка
        true // Логическое значение
        false // Другое логическое значение
        /javascript/gi // Регулярное выражение (для поиска по шаблону)
        null // Отсутствие объекта

        { x:1, y:2 } // Инициализатор объекта
        [1,2,3,4,5] // Инициализатор массива
    </pre>
</div>

<div class="slide">
    <h1>Идентификаторы</h1>

    <pre class="brush: js">
        i
        my_variable_name
        v13
        _dummy
        $str
    </pre>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">Лексика</li>
        <li>Типы</li>
        <li>Управляющие конструкции</li>
        <li>Объекты</li>
        <li>Функции</li>
    </ul>
</div>

<div class="slide">
    <h1>Типы данных и значения</h1>

    <ul class="content">
        <li class="current">Числа</li>
        <li>Строки</li>
        <li></li>
    </ul>
</div>

<div class="slide">
    <h1>Числа</h1>

    <pre class="brush: js">
        0
        3
        10000000
        0xff // 15*16 + 15 = 255 (по основанию 10)
        0xCAFE911
        0377 // 3*64 + 7*8 + 7 = 255 (по основанию 10)

        [цифры][.цифры][(E|e)[(+|)]цифры]
        3.14
        2345.789
        .333333333333333333
        6.02e23 // 6.02 X 1023
        1.4738223E32 // 1.4738223 X 1032
    </pre>
</div>

<div class="slide">
    <h1>Работа с числами</h1>

    <p>+, -, *, /</p>
    <pre class="brush: js">
        sine_of_x = Math.sin(x);
        hypot = Math.sqrt(x*x + y*y);
    </pre>
</div>

<div class="slide">
    <h1>Специальные числовые значения</h1>

    <pre class="brush: js">
        Infinity
        NaN
        Number.MAX_VALUE
        Number.MIN_VALUE
        Number.NaN
        Number.POSITIVE_INFINITY
        Number.NEGATIVE_INFINITY
    </pre>
</div>

<div class="slide">
    <h1>Типы данных и значения</h1>

    <ul class="content">
        <li class="done">Числа</li>
        <li class="current">Строки</li>
        <li></li>
    </ul>
</div>

<div class="slide">
    <h1>Строковые литералы</h1>

    <pre class="brush: js">
        "" // Это пустая строка: в ней ноль символов
        'testing'
        "3.14"
        'name="myform"'
        "Вы предпочитаете книги издательства O'Reilly, не правда ли?"
        "В этом строковом литерале\nдве строки"
        "π это отношение длины окружности круга к его диаметру"
        'You\'re right, it can\'t be a quote' (\t, \n, \", \', \\)

        msg = "Hello, " + "world"; // Получается строка "Hello, world"
        greeting = "Добро пожаловать на мою домашнюю страницу," + " " + name;
        s.length
    </pre>
</div>

<div class="slide">
    <h1>Преобразование чисел в строки</h1>

    <pre class="brush: js">
        var n = 17;
        binary_string = n.toString(2); // Вернет "10001"
        octal_string = "0" + n.toString(8); // Вернет "021"
        hex_string = "0x" + n.toString(16); // Вернет "0x11"

        var n = 123456.789;
        n.toFixed(0); // "123457"
        n.toFixed(2); // "123456.79"
        n.toExponential(1); // "1.2e+5"
        n.toExponential(3); // "1.235e+5"
        n.toPrecision(4); // "1.235e+5"
        n.toPrecision(7); // "123456.8"
    </pre>
</div>

<div class="slide">
    <h1>Преобразование строк в числа</h1>

    <pre class="brush: js">
        var number = string_value  0;
        var number = Number(string_value);

        parseInt("3 слепых мышки"); // Вернет 3
        parseFloat("3.14 метров"); // Вернет 3.14
        parseInt("12.34"); // Вернет 12
        parseInt("0xFF"); // Вернет 255

        parseInt("11", 2); // Вернет 3 (1*2 + 1)
        parseInt("ff", 16); // Вернет 255 (15*16 + 15)
        parseInt("zz", 36); // Вернет 1295 (35*36 + 35)
        parseInt("077", 8); // Вернет 63 (7*8 + 7)
        parseInt("077", 10); // Вернет 77 (7*10 + 7)

        parseInt("eleven"); // Вернет NaN
        parseFloat("$72.47"); // Вернет NaN
    </pre>
</div>

<div class="slide">
    <h1>Логические значения</h1>

    <pre class="brush: js">
        true и false

        if (a == 4) {
            b = b + 1;
        } else {
            a = a + 1;
        }

        var x_as_boolean = Boolean(x);
        var x_as_boolean = !!x;
    </pre>
</div>

<div class="slide">
    <h1>Функции</h1>

    <p>Функция – это фрагмент исполняемого кода, который определен в JavaScriptпро
грамме или заранее предопределен в реализации JavaScript</p>

    <pre class="brush: js">
        function square(x) {
            return x*x;
        }

        y = Math.sin(x);
        y = square(x);
        d = compute_distance(x1, y1, z1, x2, y2, z2);
        move();

        var square = function(x) { return x*x; }
        var square = new Function("x", "return x*x;");
    </pre>
</div>

<div class="slide">
    <h1>Объекты</h1>

    <p>Объект – это коллекция именованных значений, которые обычно называют свой
ствами (properties) объекта</p>

    <pre class="brush: js">
        image.width
        image.height

        image["width"]
        image["height"]

        document.myform.button
        document.write("это проверка");
    </pre>
</div>

<div class="slide">
    <h1>Создание объектов</h1>

    <pre class="brush: js">
        var o = new Object();
        var now = new Date();
        var pattern = new RegExp("\\sjava\\s", "i");

        var point = new Object();
        point.x = 2.3;
        point.y = 1.2;

        var point = { x:2.3, y:1.2 };
        var rectangle = {
            upperLeft: { x: 2, y: 2 },
            lowerRight: { x: 4, y: 4 }
        };
    </pre>
</div>

<div class="slide">
    <h1>Массивы</h1>

    <p>Массив (array), как и объект, представляет собой коллекцию значений. Если ка
ждое значение, содержащееся в объекте, имеет имя, то в массиве каждое значе
ние имеет номер, или индекс.</p>

    <pre class="brush: js">
        var a = new Array();
        a[0] = 1.2;
        a[1] = "JavaScript";
        a[2] = true;
        a[3] = { x:1, y:3 };

        var a = new Array(1.2, "JavaScript", true, { x:1, y:3 });
        var a = new Array(10);

        var a = [1.2, "JavaScript", true, { x:1, y:3 }];
        var matrix = [[1,2,3], [4,5,6], [7,8,9]];
    </pre>
</div>

<div class="slide">
    <h1>Operator: == </h1>

    <pre class="brush: js">
        ""           ==   "0"           // false
        0            ==   ""            // true
        0            ==   "0"           // true
        false        ==   "false"       // false
        false        ==   "0"           // true
        false        ==   undefined     // false
        false        ==   null          // false
        null         ==   undefined     // true
        " \t\r\n"    ==   0             // true
    </pre>
</div>

<div class="slide">
    <h1>Operator: === </h1>

    <pre class="brush: js">
        ""           ===  "0"           // false
        0            ===  ""            // false
        0            ===  "0"           // false
        false        ===  "false"       // false
        false        ===  "0"           // false
        false        ===  undefined     // false
        false        ===  null          // false
        null         ===  undefined     // false
        " \t\r\n"    ===  0             // false
    </pre>
</div>

<div class="slide">
    <h1>Operator: || </h1>

    <pre class="brush: js">
        ""           ||   "0"           // "0"
        0            ||   ""            // ""
        0            ||   "0"           // "0"
        false        ||   "false"       // "false"
        false        ||   "0"           // "0"
        false        ||   undefined     // undefined
        false        ||   null          // null
        null         ||   undefined     // undefined
        " \t\r\n"    ||   0             // " \t\r\n"
    </pre>
</div>

<div class="slide">
    <h1>Operator: || </h1>

    <p>Это операция часто используется, чтобы заменить конструкцию:</p>
    <pre class="brush: js">
        var var1 = param;
        if (!var1) {
            var1 = defaultValue;
        }
    </pre>
    <p>Илии такое </p>
    <pre class="brush: js">
        var var1 = param ? param : defaultValue
    </pre>

</div>

<div class="slide">
    <h1>Operator: || </h1>

    <p>На такое:</p>
    <pre class="brush: js">
        var var1 = param || defaultValue
    </pre>

    <p>Но эффектней это смотрится в таких случаях:</p>
    <pre class="brush: js">
        var var1 = param || findDefault() || tryToGuess();
    </pre>
</div>

<div class="slide">
    <h1>Example ||</h1>

    <pre class="brush: js">
        if ($('searchBox').getProperty('value')
                .toUpperCase() != defTxt
            && $('searchBox').getProperty('value').length>0){

            queryTxt = $('searchBox').value;
        }

        if (queryTxt.length > 0) {
            $('searchBox').setProperty('value', queryTxt);
        } else {
            $('searchBox').setProperty('value', defTxt);
        }
    </pre>
</div>

<div class="slide">
    <h1>Example ||</h1>

    <pre class="brush: js">
        var value = $('searchBox').getProperty('value');
        if (value.toUpperCase() != defTxt && value){
            queryTxt = value;
        }

        $('searchBox').setProperty('value',
                queryTxt || defTxt);
    </pre>
</div>

<div class="slide">
    <h1>Operator: && </h1>

    <pre class="brush: js">
        ""           &&   "0"           // ""
        0            &&   ""            // 0
        0            &&   "0"           // 0
        false        &&   "false"       // false
        false        &&   "0"           // false
        false        &&   undefined     // false
        false        &&   null          // false
        null         &&   undefined     // null
        " \t\r\n"    &&   0             // 0
    </pre>
</div>

<div class="slide">
    <h1>Operator: && </h1>

    <p>Этот оператор часто используется для преобразования конструкций:</p>
    <pre class="brush: js">
        if (cond) {
            doAction();
        }
    </pre>

    <p>К короткому виду:</p>
    <pre class="brush: js">
        cond && doAction()
    </pre>

    <p>Опять же эффект сильно увеличивается при увеличении последовательности действий\проверок</p>
</div>

<div class="slide">
    <h1>Operator: ?:</h1>

    <pre class="brush: js">
        x > 0 ? x*y : x*y
    </pre>
</div>

<div class="slide">
    <h1>Operators</h1>

    <pre class="brush: js">
        (4 >= 6 || "grass" != "green") &&
            !(12 * 2 == 144 && true)
    </pre>
</div>

<div class="slide">
    <h1>Operator: typeof</h1>

    <pre class="brush: js">
        typeof 37 === 'number';
        typeof Infinity === 'number';
        typeof NaN === 'number'; // Despite being "Not-A-Number"

        typeof undefined === 'undefined';
        typeof blabla === 'undefined'; // an undefined variable

        typeof null === "object"

        // weird
        typeof /s/ === 'function'; // Chrome 1-12
        typeof alert === 'object'; // IE 6, 7 and 8
    </pre>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">Лексика</li>
        <li class="done">Типы</li>
        <li class="current">Управляющие конструкции</li>
        <li>Объекты</li>
        <li>Функции</li>
    </ul>
</div>


<div class="slide">
    <h1>Управляющие конструкции</h1>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">Лексика</li>
        <li class="done">Типы</li>
        <li class="done">Управляющие конструкции</li>
        <li class="current">Объекты</li>
        <li>Функции</li>
    </ul>
</div>

<div class="slide">
    <h1>Объекты</h1>

    <ul>
        <li>В JavaScript всё является объектом, лишь за одним исключением — <code class="js keyword">undefined</code>.</li>
        <li>Объекты в JavaScript представляют из себя хеш-таблицу: набор именованных свойств (ключей), привязанных к значениям.</li>
        <li>
            <pre class="brush: js">
                var obj = {
                  shiny: true,
                  isShiny: function() {
                    return this.shiny;
                  }
                };
            </pre>
        </li>
    </ul>
</div>

<div class="slide">
    <h1>Объекты: добавляем свойства</h1>

    <p>Получить доступ к свойствам объекта можно двумя способами:</p>
    <pre class="brush: js">
        var foo = {name: 'Kitten', age: 27}
    </pre>
    <dl>
        <dt>Используя точечную нотацию</dt>
        <dd>
            <pre class="brush: js">
                foo.name;           // kitten
                foo.color = "red";  // add new property
            </pre>
        </dd>
    </dl>
</div>

<div class="slide">
    <h1>Объекты: добавляем свойства</h1>

    <p>Получить доступ к свойствам объекта можно двумя способами:</p>
    <pre class="brush: js">
        var foo = {name: 'Kitten', age: 27}
    </pre>
    <dl>
        <dt>Квадратными скобками</dt>
        <dd>
            <pre class="brush: js">
                foo['name'];        // kitten

                var get = 'color';
                foo[get];           // red
            </pre>
        </dd>
    </dl>
</div>

<div class="slide">
    <h1>Объекты: добавляем свойства</h1>

    <pre class="brush: js">
        var foo = {name: 'Kitten', age: 27}

        // Используя точечную нотацию
        foo.name;           // kitten
        foo.color = "red";  // add new property

        // Квадратными скобками
        foo['name'];        // kitten

        var get = 'color';
        foo[get];           // red
    </pre>
</div>

<div class="slide">
    <h1>Объекты: удаляем свойства</h1>

    <ul class="incremental">
        <li>Единственный способ удалить свойство у объекта — использовать оператор <code class="js keyword">delete</code>.</li>
        <li>Устанавливая свойство в undefined или null, вы только заменяете связанное с ним значение, но не удаляете ключ.</li>
        <li>
            <pre class="brush: js">
                var obj = { bar: 1, foo: 2, baz: 3 };

                obj.bar = undefined;
                obj.foo = null;
                delete obj.baz;
            </pre>
        </li>
    </ul>
</div>

<div class="slide">
    <h1>Объекты: методы</h1>

    <p>Методы в JS объектах это тоже, что и свойства.</p>
    <pre class="brush: js">
        var object = {
            property : "hello",
            method_01 : function () {...}
        };
        object.method_02 = function() { ... };
    </pre>
    <p>Доступ к другим полям обьекта через <code class="js keyword">this</code></p>
    <pre class="brush: js">
        object.method_03 = function() {
            alert(this.property)
        };
    </pre>
</div>

<div class="slide">
    <h1>Content</h1>

    <ul class="content">
        <li class="done">Лексика</li>
        <li class="done">Типы</li>
        <li class="done">Управляющие конструкции</li>
        <li class="done">Объекты</li>
        <li class="current">Функции</li>
    </ul>
</div>

<div class="slide">
    <h1>Функции</h1>

    <pre class="brush: js">
        function add(a, b) {
          return a + b;
        }

        show(add(2, 2));
    </pre>
</div>

<div class="slide">
    <h1>Функции</h1>

    <pre class="brush: js">
        function power(base, exponent) {
          var result = 1;
          for (var count = 0; count < exponent; count++)
            result *= base;
          return result;
        }

        show(power(2, 10));
    </pre>
</div>

<div class="slide">
    <h1>Функции</h1>

    <pre class="brush: js">
        var variable = "top-level";

        function printVariable() {
          print("inside printVariable, the variable holds '" +
                variable + "'.");
        }

        function test() {
          var variable = "local";
          print("inside test, the variable holds '" + variable + "'.");
          printVariable();
        }

        test();
    </pre>
</div>

<div class="slide">
    <h1>Функции</h1>

    <pre class="brush: js">
        var variable = "top-level";
        function parentFunction() {
          var variable = "local";
          function childFunction() {
            print(variable);
          }
          childFunction();
        }
        parentFunction();
    </pre>
</div>

<div class="slide">
    <h1>Функции</h1>

    <pre class="brush: js">
        var variable = "top-level";
        function parentFunction() {
          var variable = "local";
          function childFunction() {
            print(variable);
          }
          return childFunction;
        }

        var child = parentFunction();
        child();
    </pre>
</div>

<div class="slide">
    <h1>Функции</h1>

    <pre class="brush: js">
        function makeAddFunction(amount) {
          function add(number) {
            return number + amount;
          }
          return add;
        }

        var addTwo = makeAddFunction(2);
        var addFive = makeAddFunction(5);
        show(addTwo(1) + addFive(1));
    </pre>
</div>

<div class="slide">
    <h1>Функции</h1>

    <pre class="brush: js">
        var foo = function fib(n) {
            return n < 2 && 1 || fib(n-1) + fib(n-2);
        }

        foo(6); // 13
        fib();  // получим ReferenceError
    </pre>
</div>

<div class="slide">
    <h1>Задачи</h1>

    <ol>
        <li>Сложите все натуральные числа до тысячи, кратные 3 или 5.</li>
        <li>Найдите сумму всех чётных элементов ряда Фибоначчи, которые не превышают четыре миллиона.</li>
        <li>Найдите самый большой делитель сложного числа, являющийся простым числом.</li>
        <li>Найдите самый большой палиндром, полученный произведением двух трёхзначных чисел.</li>
        <li>...</li>
    </ol>
</div>

<div class="slide">
    <h1>Задачи</h1>

    <ol>
        <li>Какое самое маленькое число делится без остатка на все числа от 1 до 20?</li>
        <li>Какова разность между суммой квадратов и квадратом суммы?</li>
        <li>Найдите 10001-ое простое число.</li>
        <li>Найдите наибольшее произведение пяти последовательных цифр в 1000-значном числе.</li>
        <li>...</li>
    </ol>
</div>

<div class="slide">
    <h1>Задачи</h1>

    <ol>
        <li>Найдите единственную тройку Пифагора {a, b, c}, для которой a + b + c = 1000.</li>
        <li>Подсчитайте сумму всех простых чисел меньше двух миллионов.</li>
        <li><a href="http://euler.jakumo.org/problems.html" rel="nofollow" target="_blank">http://euler.jakumo.org/problems.html</a></li>
        <li><a href="http://projecteuler.net/problems" rel="nofollow" target="_blank">Оригинальный сайт с задачами.</a></li>
    </ol>
</div>

<div class="slide">
    <h1>Курсы</h1>

    <ul>
        <li><a href="http://www.intuit.ru/department/internet/js/" rel="nofollow" target="_blank">Введение в JavaScript </a></li>
        <li><a href="http://www.intuit.ru/department/internet/jsbasics/" rel="nofollow" target="_blank">Основы программирования на JavaScript</a></li>
        <li><a href="http://www.intuit.ru/department/internet/jspractics/" rel="nofollow" target="_blank">Практикум по программированию на JavaScript </a></li>
    </ul>
</div>

<div class="slide">
    <h1>Интерактивные учебники</h1>

    <ul>
        <li><a href="http://www.codecademy.com/" rel="nofollow" target="_blank">codecademy</a></li>
        <li><a href="http://eloquentjavascript.net/" rel="nofollow" target="_blank">Eloquent JavaScript</a></li>
    </ul>

</div>


</body>
</html>